<!-- 脚本 交互 -->
 <script setup lang="ts">
import {userGetAllUsersInfos} from '@/api/user.ts'
// 导入图标
import { Management, Promotion, UserFilled, User, Crop, EditPen ,SwitchButton,CaretBottom } from '@element-plus/icons-vue';


// async function getAllUserInfos(){
//     const reponse = await userGetAllUsersInfos()
//     console.log(reponse.data)
    
// }
// 默认头像
import useUserInfoStore from '@/stores/userInfo.js'
import avatar from '@/assets/defaultAvatar.jpg'
const userInfoStore = useUserInfoStore();
// 图标
import userManageIcon from '@/assets/user_manage_icon.png'
import productManageIcon from '@/assets/product_manage_icon.png'
import searchIcon from '@/assets/search_logo.png'


import {useTokenStore} from '@/stores/token.ts'
const tokenStore = useTokenStore();
import {userInfoService} from '@/api/user.ts'
//调用函数,获取用户详细信息
const getUserInfo = async()=>{
    //调用接口
    let result = await userInfoService();
    //数据存储到pinia中
    userInfoStore.setInfo(result.data);
}
getUserInfo()
//条目被点击后,调用的函数
import {useRouter} from 'vue-router'
const router = useRouter();
import {ElMessage,ElMessageBox} from 'element-plus'

const handleCommand = (command: any) =>{
    // 判断指令
    if(command === 'logout'){
        //退出登录
        ElMessageBox.confirm(
        '您确认要退出吗?',
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
    .then(async () => {
            //退出登录
            //1.清空pinia中存储的token以及个人信息
            tokenStore.removeToken()
            // userInfoStore.removeInfo()

            //2.跳转到登录页面
            router.push('/login')
            ElMessage({
                type: 'success',
                message: '退出登录成功',
            })
            
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '用户取消了退出登录',
            })
        })
    }else{
        //路由
        router.push('/user/'+command)
    }
}


</script>


<!-- ************************************************************************************************************************************************************* -->
<!-- ************************************************************************************************************************************************************* -->
<!-- html 结构 -->
<template>
<div class="to-left-top">
    <el-container class="layout-container">
   <!-- 左侧菜单 -->
   <el-aside width="220px">
            <div class="el-aside__logo"></div>
            <!-- element-plus的菜单标签 -->
            <el-menu active-text-color="#ffd04b" background-color="#232323"  text-color="#fff"
                router>
              <el-menu-item index="/search">
                <el-icon>
                  <img :src="searchIcon" alt="User Manage Icon" class="icon-image" />
                </el-icon>
                <span>休闲搜索</span>
              </el-menu-item>
                <!-- 导航一：个人中心 -->
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>个人中心</span>
                    </template>
                    <el-menu-item index="/user/info">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/user/avatar">
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item index="/user/resetPassword">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>
                <!-- 导航二：员工管理 -->
                <el-menu-item index="/employee/infos">
                    <el-icon>
                        <img :src="userManageIcon" alt="User Manage Icon" class="icon-image" />
                    </el-icon>
                    <span>员工管理</span>
                </el-menu-item>
                <!-- 导航三：产品管理 -->
                <el-menu-item index="/product/infos">
                    <el-icon>
                        <img :src="productManageIcon" alt="Product Manage Icon" class="icon-image" />
                    </el-icon>
                    <span>产品管理</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
 <!-- 右侧主区域 -->
 <el-container>
                  <!-- 头部区域 -->
            <el-header>
              <div class="staff-name">工作人员：<strong><!-- 小小洋 --> {{ userInfoStore.info.nikename }}</strong></div>
  <!-- 下拉菜单 -->
           <!-- command: 条目被点击后会触发,在事件函数上可以声明一个参数,接收条目对应的指令 -->
           <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="userInfoStore.info.avatar ? userInfoStore.info.avatar : avatar" />
                        <!-- src="userInfoStore.info.userPic? userInfoStore.info.userPic:avatar" -->
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item>
                            <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item>
                            <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
                 <!-- 中间区域 -->
            <el-main>
                <!-- <div style="width: 1290px; height: 570px;border: 1px solid red;">
                    内容展示区
                </div> -->
                <router-view></router-view>
            </el-main>
              <!-- 底部区域 -->
              <el-footer >xxxxx系统---xxx公司</el-footer>
            </el-container>
  </el-container>
  </div>

</template>





<!-- ************************************************************************************************************************************************************* -->
<!-- ************************************************************************************************************************************************************* -->
<!-- 样式 -->
 <style lang="scss" scoped>
.to-left-top{
  position: absolute; /* 使用绝对定位 */
  top: 0; /* 置顶 */
  left: 0; /* 靠左 */
  margin: 0; /* 移除默认的外边距 */
  padding: 0px; /* 添加一些内边距以改善视觉效果 */
  width: 100%;
  height: 100%;
  // background-color: rgba(255, 255, 255, 0.8); /* 可选：背景颜色和透明度 */
}

.layout-container {
  height: 100vh;
  .el-aside {
    background-color: #232323;
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */

    &__logo {
      height: 120px;
      background: url('@/assets/indexTopSystem.png') no-repeat center / 120px auto;
    }

    .el-menu {
      border-right: none;
    }
  }

  .el-container {
    padding: 0; /* 移除 .el-container 的内边距 */
    margin: 0; /* 移除 .el-container 的外边距 */
  }

  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
.staff-name {
  font-family: 'LiSu', cursive; /* 使用隶书字体 */
  font-weight: bold; /* 字体加粗 */
  font-size: 24px; /* 设置字体大小为 16px */
}

.icon-image { // ------> 图标样式
  width: 16px; /* 设置图片的宽度 */
  height: 16px; /* 设置图片的高度 */
  vertical-align: middle; /* 使图片与文本垂直居中对齐 */
  margin-right: 8px; /* 在图片右侧添加一些间距 */
}
</style>